<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="产品线">
        <el-select v-model="queryParams.productLine" @change="queryParams.productId = ''" clearable filterable size="medium" placeholder="请选择产品线">
           <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in productLines"/>
        </el-select>
      </el-form-item>
      <el-form-item label="产品">
        <el-select v-model="queryParams.productId" clearable filterable size="medium" placeholder="请选择产品">
          <el-option
            v-for="product in productList"
            :disabled="product.productLine !== parseInt(queryParams.productLine) && queryParams.productLine !== ''"
            :key="product.id"
            :label="product.name"
            :value="product.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务名称">
        <el-input
          v-model="queryParams.serviceName"
          placeholder="请输入服务名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['productService:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['productService:del']"
        >删除
        </el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="productServiceList"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column prop="productName" label="产品名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="serviceName" label="服务名称"></el-table-column>
      <el-table-column prop="serviceCode" label="控制code"></el-table-column>
      <el-table-column prop="serviceValue" label="控制值"></el-table-column>
      <el-table-column prop="serviceType" label="指令类型">
        <template slot-scope="scope"> {{getServiceType(scope.row.serviceType)}} </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>

      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row)"
                     v-hasPermi="['productService:update']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['productService:del']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品线" prop="productLine">
              <el-select v-model="form.productLine" @change="form.productId = ''" clearable filterable size="medium" placeholder="请选择产品线">
                <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in productLines"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="产品名称" prop="productId">
              <el-select
                v-model="form.productId" filterable size="medium" placeholder="请选择产品名称">
                <el-option
                  v-for="product in productList"
                  :disabled="product.productLine !== parseInt(form.productLine)"
                  :key="product.id"
                  :label="product.name"
                  :value="product.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="指令类型" prop="serviceType">
               <el-select v-model="form.serviceType">
                <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in serviceTypes"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="服务名称" prop="serviceName">
              <el-input v-model="form.serviceName" placeholder="请输入产品服务名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="控制code" prop="serviceCode">
              <el-input v-model="form.serviceCode" placeholder="请输入控制code"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="控制值" prop="serviceValue">
              <el-input v-model="form.serviceValue" placeholder="请输入控制值"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注"/>
            </el-form-item>
          </el-col>


        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {queryProductService, addProductService, updateProductService, deleteProductService} from "@/api/allData/productService";
  import {queryProduct,queryAllProduct} from "@/api/allData/product";
  import {deepClone} from "@/utils/index";
  import {productLine,serviceType} from "@/utils/enums";
 
  export default {
    name: "ProductService",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 类别表格树数据
        productServiceList: [],
        productList: [],
        // 菜单树选项
        menuOptions: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          productId: '',
          serviceName: '',
          productLine: '',
          id: ''
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          productLine: [
            {required: true, message: "产品线不能为空", trigger: "blur"}
          ],
          productId: [
            {required: true, message: "产品不能为空", trigger: "blur"}
          ],
          serviceType: [
            {required: true, message: "指令类型不能为空", trigger: "blur"}
          ],
          serviceName: [
            {required: true, message: "请输入正确的服务名称", trigger: "blur"}
          ],
          serviceCode: [
            {required: true, message: "请输入正确的控制code", trigger: "blur"}
          ],
          remark:[
            { max:100, message: "备注最大长度100", trigger: "blur"}
          ]
        },
        //产品线
        productLines: [],
        serviceTypes:[]
      };
    },
    created() {
      this.getList();
      this.getProductList();
      this.initStaticData();
    },
    watch:{
      total(val,oldVal){
        /*  第N页最后一条数据删除后 重新加载上一页 */
        if(this.total>0 && this.total%this.queryParams.pageSize === 0){
          this.queryParams.pageNo = this.queryParams.pageNo - 1
          this.getList(this.queryParams)
        }
      }
    },
    methods: {
      getList() {
        this.loading = true;
        let temList = []
        queryProductService(this.queryParams).then(response => {
          temList = response.data;
          this.total = response.page.total;
          let hs = ''
          this.productServiceList = temList
          this.loading = false;
        });
      },
      getProductList() {
        queryAllProduct().then(response => {
          if (response.code === 0) {
            this.productList = response.data
          }
        })
      },
      //从静态文件中获取数据
      initStaticData() {
        this.productLines = productLine;
        this.serviceTypes = serviceType;
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNo = 1
        this.getList();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.form.id = '';
        this.open = true;
        this.title = "添加服务";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.form = deepClone(row);
        this.open = true;
        this.title = "修改服务";
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id !== '') {
              updateProductService(this.form).then(response => {
                if (response.code === 0) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addProductService(this.form).then(response => {
                if (response.code === 0) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        let dictIds = [];
        if (row.id) {
          dictIds.push(row.id);
        } else {
          dictIds = this.ids
        }
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return deleteProductService({'ids' : dictIds});
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
      getServiceType(serviceType){
        // this.serviceTypes.forEach((value, index) => {
            //console.log(index + ':' + value.value);
       // });
        var value;
        switch (serviceType) {
          case 1:  value = '普通指令';break;
          case 2:  value = '红外指令';break;
          case 3:  value = '梯控';break;
          case 4:  value = '主机场景';break;
          case 5:  value = '主机事件';break;
          case 6:  value = '主机服务';break;
          case 7:  value = '虚拟指令';break;
          case 8:  value = '主机属性';break;
          case 9:  value = 'NB门锁';break;
          case 10:  value = 'SMART24A场景';break;
          case 11: value = 'SMART24A控制';break;
          case 12: value = 'SOS服务';break;
          case 13: value = '蓝牙音乐';break;
          case 14: value = '485转接器';break;
          case 15: value = 'SMART24J';break;
          case 16: value = '空调大网关';break;
          case 17: value = '晾衣架';break;
          case 18: value = 'D8蓝牙音乐';break;
          case 19: value = '雷达';break;
          case 20: value = 'D8旋钮';break;
        }
        return value;
      }
    }
  };
</script>
